<template>
  <div class="result">
    <van-cell-group>
      <van-cell title="店铺id" :value="shop.kdtId" :border="true" />
      <van-cell title="用户昵称" :value="user.nickName" />
      <van-cell title="手机号码" :value="user.mobile" />
      <van-cell title="用户id" :value="user.userOpenId" />
    </van-cell-group>
    <van-panel title="支付信息">
      <van-cell-group>
        <van-cell title="支付方式:" :value="payResult.payWayPrompt" :border="true" />
        <van-cell title="支付金额:" :value="realPayAmount" />
      </van-cell-group>
      <template #footer>
        <div class="btn-container">
          <van-button block size="small" type="primary" @click="orderDetail(1)">查看订单详情</van-button>
        </div>
        <div class="btn-container" style="margin-bottom:8px;">
          <van-button block size="small" type="primary" @click="orderDetail(2)">电子卡券凭证详情</van-button>
        </div>
      </template>
    </van-panel> 
    <div class="qscore-container">
      <van-image
        width="150"
        height="150"
        :src="require('./mmexport1586764750960.jpg')"
      />
    </div>
  </div>
</template>

<script>
const { getData, pageData, events, getProcess } = window.youzanyunbridge;

import { Col, Row, Cell, CellGroup, Panel, Button, Image, } from 'vant';

export default {
  title: '支付完成页面',

  name: 'pay-success',

  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Panel.name]: Panel,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Image.name]: Image,
  },

  data () {
    return {
      shop: getData("shop"),
      user: getData("user"),
      ordorNo: '0000',
      payResult: pageData.payResult,
      orderDetailUrl: pageData.orderDetailUrl,
      virtualTicketDetailUrl: pageData.virtualTicketDetailUrl,
    }
  },

  computed: {
    realPayAmount () {
      return (this.payResult.realPayAmount / 100).toFixed(2)
    } 
  },

  methods: {
    orderDetail (val) {
      if (val === 1) {  
        // 查看订单详情
        window.location.href = this.orderDetailUrl;
      }

      if (val === 2) {
        // 电子卡券凭证详情
        window.location.href = this.virtualTicketDetailUrl;
      } 
    },
  },
}
</script>

<style lang="scss" scoped>
.result {
  width: 100%;
  height: auto;
  overflow: hidden;

  .btn-container {
    width: 90%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .qscore-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
}

</style>
